<template>
  <div class="chat-view">
    <!-- 消息区域 -->
    <div v-if="hasMessages" class="messages-container" ref="messagesContainer">
      <!-- 消息列表 -->
      <div 
        v-for="message in chatStore.currentChat?.messages" 
        :key="message.id"
        class="message"
        :class="message.is_user ? 'user-message' : 'ai-message'"
      >
        <!-- 消息头像 -->
        <div class="message-avatar">
          <div v-if="message.role === 'user'" class="avatar user-avatar">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="var(--kimi-avatar-user)"/>
            </svg>
          </div>
          <div v-else class="avatar ai-avatar">
            <div class="ai-logo">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="var(--kimi-avatar-ai)"/>
              </svg>
            </div>
          </div>
        </div>
        
        <div class="message-content">
          <div class="message-header">
            <span class="sender-name">{{ message.is_user ? '你' : 'AI助手' }}</span>
            <span class="message-time">{{ formatTime(message.created_at) }}</span>
          </div>
          
          <div class="message-bubble" :class="message.is_user ? 'user-bubble' : 'ai-bubble'">
            <!-- 加载状态 -->
            <div v-if="!message.is_user && chatStore.isSending && message.content === 'AI助手思考中...'" class="message assistant typing">
              <div class="typing-indicator">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
            <div v-if="!(!message.is_user && chatStore.isSending && message.content === 'AI助手思考中...')" class="message-text">
              <!-- 思考 -->
              <markdown-it v-if="!message.is_user" class="message-think" :source="message.thinking" style="margin-bottom: 10px;" />
              <!-- 回答 -->
              <markdown-it v-if="message.content" class="message-answer" :source="message.content" />
            </div>
          </div>
          <!-- 消息操作按钮 -->
          <div v-if="!message.is_user && !chatStore.isSending" class="message-actions">
            <div class="action-buttons">
              <button class="action-btn" @click="copyMessage(message.content)" title="复制">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" fill="currentColor"/>
                </svg>
                <span>复制</span>
              </button>
              
              <button class="action-btn" @click="retryMessage(message.id)" title="重试">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" fill="currentColor"/>
                </svg>
                <span>重试</span>
              </button>
              <button 
                class="feedback-btn like-btn"
                :class="{ active: message.is_positive }"
                @click="showFeedbackModal(message.id, 'like')"
                title="点赞"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z" fill="currentColor"/>
                </svg>
                <span>有用</span>
              </button>
              <button 
                class="feedback-btn dislike-btn"
                :class="{ active: message.is_positive === false }"
                @click="showFeedbackModal(message.id, 'dislike')"
                title="点踩"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z" fill="currentColor"/>
                </svg>
                <span>无用</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-container">
      <!-- 欢迎消息 -->
      <div v-if="!chatStore.currentChat?.messages?.length" class="welcome-message">
        <div class="welcome-content">
          <div class="welcome-icon">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="var(--kimi-primary)"/>
            </svg>
          </div>
          <h2>欢迎使用AI助手</h2>
        </div>
      </div>
      <!-- 输入框 -->
      <div class="input-wrapper">
        <div class="input-box">
          <textarea
            v-model="inputMessage"
            placeholder="输入您的问题..."
            @keydown="handleKeydown"
            @input="adjustTextareaHeight"
            rows="4"
            ref="textareaRef"
            class="message-input"
          ></textarea>
          
          <button 
            class="send-btn" 
            :disabled="!inputMessage.trim() || chatStore.isSending"
            @click="sendMessage(inputMessage)"
            :class="{ disabled: !inputMessage.trim() || chatStore.isSending }"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" fill="currentColor"/>
            </svg>
          </button>
        </div>
        
        <div class="input-footer">
          <span class="input-tips">按 Enter 发送，Shift + Enter 换行</span>
        </div>
      </div>
      <!-- 推荐问题 -->
      <div v-if="recommendedQuestions?.length > 0 && !chatStore.currentChatId" class="recommended-questions">
        <div class="questions-scroll">
          <button 
            v-for="(question, index) in recommendedQuestions" 
            :key="index"
            class="question-chip"
            @click="sendMessage(question)"
          >
            {{ question }}
          </button>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
    title="反馈"
    v-model="feedbackModalVisible"
    class="feedback-modal"
    :before-close="beforeClose"

  >
    <div class="modal-content">
      <el-input
        type="textarea"
        v-model="feedbackModal.feedbackText"
        placeholder="请输入您的反馈..."
        rows="4"
        class="feedback-input"
      ></el-input>
    </div>
    <!-- footer -->
    <template #footer>
      <el-button type="primary" @click="handleSubmitFeedback">提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { nanoid } from 'nanoid'
import { ref, computed, nextTick, onMounted, watch, onBeforeUnmount, reactive } from 'vue'
import MarkdownIt from 'vue3-markdown-it'
import { useRouter } from 'vue-router'
import { useChatStore } from '@/stores/chatStore'
// 流式接口
import { streamChat, submitFeedback, getConversationDetail } from '@/services/apiService'

const chatStore = useChatStore()
const router = useRouter()
// 直接从store中获取响应式引用，而不是解构


const inputMessage = ref('')
const textareaRef = ref(null)
const messagesContainer = ref(null)
const shouldAutoScroll = ref(false)


const feedbackModalVisible = ref(false)
const feedbackModal = reactive({
  feedbackText: '',
  messageId: '',
  feedbackType: ''
})

// 计算是否有消息
const hasMessages = computed(() => {
  return chatStore.currentChat?.messages && chatStore.currentChat.messages.length > 0
})

const recommendedQuestions = computed(() => {
  console.log('recommendedQuestions from store:', chatStore.recommendedQuestions)
  return chatStore.recommendedQuestions
})


// 展示思考内容 think标签 或者 回答内容
const renderMarkdown = (content, type) => {
  // 提取think标签内容
  const thinkMatch = content.match(/<think>([\s\S]*?)<\/think>/)
  if (thinkMatch && type === 'think') {
    return thinkMatch[1]
  }
  // 替换掉think标签以及think标签内的内容
  return content.replace(/<think>[\s\S]*?<\/think>/, '')
}

// 发送消息函数
const sendMessage = async (content) => {
  if (!content.trim() || chatStore.isSending) return
  if (!chatStore.currentChat?.session_id) {
    chatStore.createNewChat()
  }
  const userMessage = {
    id: nanoid(),
    is_user: true,
    content: content.trim(),
    created_at: Date.now()
  }
  
  chatStore.addMessage(userMessage)
  inputMessage.value = ''
  adjustTextareaHeight()
  
  // 发送消息后启用自动滚动
  shouldAutoScroll.value = true
  
  chatStore.setIsSending(true)
  router.push(`/chat/${chatStore?.currentChat?.session_id}`)
  const aiMessage = {
    id: nanoid(),
    is_user: false,
    content: 'AI助手思考中...',
    thinking: '',
    created_at: Date.now(),
    feedback: null
  }
  
  chatStore.addMessage(aiMessage)

  try {
    let finalResult = ''
    streamChat(content, chatStore?.currentChat?.session_id, (chunk) => {
      // 外部实时处理逻辑（例如更新 UI）
      // console.log('外部处理 chunk:', chunk)
      finalResult += chunk
      const thinkMatch = finalResult.match(/<think>([\s\S]*?)<\/think>/)
      const thinkingContent = thinkMatch ? thinkMatch[1] : ''
      const answerContent = thinkMatch ? finalResult.replace(/<think>([\s\S]*?)<\/think>/, '') : finalResult

      if (finalResult.includes('</think>')) {
        chatStore.updateMessage(aiMessage.id, {
          content: answerContent,
          thinking: thinkingContent
        })
      } else {
        if (finalResult.includes('<think>')) {
          chatStore.updateMessage(aiMessage.id, {
            thinking: finalResult,
            content: '',
          })
        } else {
          chatStore.updateMessage(aiMessage.id, {
            content: finalResult,
            thinking: '',
          })
        }
      } 
    })
    .then(finalResult => {
      console.log('完整结果:', finalResult)
    })
    .catch(error => {
      console.error('调用失败:', error)
    }).finally(() => {
      chatStore.setIsSending(false)
      getConversationDetail(chatStore?.currentChat?.session_id).then(res => {
        if (res.code === 200) {
          chatStore.currentChat.messages = res.data.messages.map(msg => ({
            ...msg,
            content: msg.content.replace(/<think>([\s\S]*?)<\/think>/, ''),
            // 提取思考内容
            thinking: msg.content.match(/<think>([\s\S]*?)<\/think>/)?.[1] || '',
            finished: true
          })) || []
        }
      })
    })
    
  } catch (error) {
    console.error('发送消息失败:', error)
    chatStore.setIsSending(false)
    // 如果API调用失败，使用模拟回复
    chatStore.updateMessage(aiMessage.id, {
      content: '很抱歉，我暂时无法回答您的问题。'
    })
  } finally {
    // 滚动到底部
    nextTick(() => {
      scrollToBottom()
    })
  }
}

// 复制消息
const copyMessage = async (content) => {
  try {
    await navigator.clipboard.writeText(content)
    // 可以添加复制成功的提示
    console.log('消息已复制到剪贴板')
    ElMessage.success('消息已复制到剪贴板')
  } catch (err) {
    console.error('复制失败:', err)
    ElMessage.error('复制失败')
  }
}

// 重试消息
const retryMessage = (messageId) => {
  const chat = chatStore.currentChat
  if (!chat) return
  
  const messageIndex = chat.messages.findIndex(msg => msg.id === messageId)
  if (messageIndex === -1 || messageIndex === 0) return
  
  const userMessage = chat.messages[messageIndex - 1]
  if (userMessage.is_user) {
    // 重新发送用户消息
    nextTick(() => {
      sendMessage(userMessage.content)
    })
  }
}

// 展示反馈弹窗
const showFeedbackModal = (messageId, feedbackType) => {
  console.log(messageId, feedbackType)
  feedbackModalVisible.value = true
  feedbackModal.feedbackText = ''
  feedbackModal.messageId = messageId
  feedbackModal.feedbackType = feedbackType
}

// 关闭反馈弹窗
const beforeClose = () => {
  feedbackModal.feedbackText = ''
  feedbackModalVisible.value = false
}

// 处理反馈
const handleSubmitFeedback = async () => {
  const { messageId, feedbackType, feedbackText } = feedbackModal
  if (!feedbackText.trim()) {
    ElMessage.warning('请输入反馈内容')
    return
  }
  try {
    const isPositive = feedbackType === 'like'
    const res = await submitFeedback(messageId, isPositive, feedbackText)
    if (res.code === 200) {
      ElMessage.success('反馈提交成功')
      // 更新消息的反馈状态
      const chat = chatStore.currentChat
      if (chat) {
        const message = chat.messages.find(msg => msg.id === messageId)
        if (message) {
          message.is_positive = isPositive
        }
      }
    } else {
      ElMessage.error('反馈提交失败')
    }
    console.log(`反馈提交成功: ${feedbackType}`)
  } catch (error) {
    console.error('提交反馈失败:', error)
  } finally {
    feedbackModalVisible.value = false
  }
}

// 格式化时间
const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now - date
  
  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) { // 1天内
    return `${Math.floor(diff / 3600000)}小时前`
  } else {
    return date.toLocaleDateString('zh-CN', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    })
  }
}

// 键盘事件处理
const handleKeydown = (event) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault()
    sendMessage(inputMessage.value)
  }
}

// 调整文本域高度
const adjustTextareaHeight = () => {
  nextTick(() => {
    const textarea = textareaRef.value
    if (textarea) {
      textarea.style.height = 'auto'
      textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'
    }
  })
}

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value && shouldAutoScroll.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 监听消息变化，自动滚动
watch(() => chatStore.currentChat, (newMessages) => {
  console.log('消息数量变化:', newMessages)
  nextTick(() => {
    scrollToBottom()
  })
}, {deep: true})

onMounted(() => {
  // 初始禁用自动滚动
  shouldAutoScroll.value = false
  
  // 聚焦输入框
  nextTick(() => {
    const textarea = textareaRef.value
    if (textarea) {
      textarea.focus()
    }
  })
})

onBeforeUnmount(() => {
  // 组件卸载时，重置滚动状态
  shouldAutoScroll.value = false
  chatStore.setIsSending(false)
})
</script>

<style scoped lang="less">
.chat-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--kimi-bg);
  position: relative;
}

/* 消息容器 - 优化垂直居中效果 */
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px 0;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: calc(100vh - 160px);
}

/* 欢迎消息 - 优化垂直居中显示 */
.welcome-message {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100%; */
  min-height: 200px;
  padding: 0 20px;
}

.welcome-content {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.welcome-icon {
  margin-bottom: 16px;
}

.welcome-content h2 {
  font-size: 32px;
  font-weight: 600;
  color: var(--kimi-text-primary);
  margin-bottom: 16px;
  line-height: 1.3;
}

.welcome-content p {
  font-size: 18px;
  color: var(--kimi-text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
}

/* 消息样式 - 优化间距和视觉效果 */
.message {
  display: flex;
  margin-bottom: 32px;
  gap: 16px;
  animation: fadeIn 0.4s ease;
  max-width: 100%;
  padding: 0 20px;
}


.message.user-message {
  flex-direction: row-reverse;
  .message-header {
    flex-direction: row-reverse;
  }
}


.message.typing {
  opacity: 0.8;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.message-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-avatar {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.ai-avatar {
  background: linear-gradient(135deg, #10a37f, #059669);
}

.ai-logo {
  width: 20px;
  height: 20px;
}

.message-content {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 52px);
}

.message-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.sender-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--kimi-text-primary);
}

.message-time {
  font-size: 13px;
  color: var(--kimi-text-secondary);
}

.message-bubble.user-bubble {
  display: flex;
  justify-content: flex-end;
}

.message-text {
  width: calc(100% - 52px);
  line-height: 1.7;
  font-size: 15px;
}

.message-think {
  background: transparent;
  border-left: 1px solid var(--kimi-border);
  padding: 16px 20px;
}

.message-answer {
  background: var(--kimi-sidebar-bg);
  border: 1px solid var(--kimi-border);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 16px 20px;
}

// .message.assistant.typing {
//   display: flex;
//   flex-direction: row-reverse;
// }

/* 消息操作 */
.message-actions {
  margin-top: 16px;
  padding: 0 20px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--kimi-border);
  background: white;
  border-radius: 8px;
  font-size: 13px;
  color: var(--kimi-text-secondary);
  transition: all 0.2s;
  font-weight: 500;
}

.action-btn:hover {
  background: var(--kimi-hover);
  border-color: var(--kimi-primary);
  color: var(--kimi-primary);
  transform: translateY(-1px);
}

.feedback-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--kimi-border);
}

.feedback-label {
  font-size: 13px;
  color: var(--kimi-text-secondary);
  font-weight: 500;
}

.feedback-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--kimi-border);
  background: white;
  border-radius: 8px;
  font-size: 13px;
  color: var(--kimi-text-secondary);
  transition: all 0.2s;
  font-weight: 500;
}

.feedback-btn.active {
  border-color: var(--kimi-primary);
  color: var(--kimi-primary);
  transform: translateY(-1px);
}

.feedback-btn:hover {
  background: var(--kimi-hover);
  transform: translateY(-1px);
}

.like-btn.active {
  background: rgba(16, 163, 127, 0.1);
}

.dislike-btn.active {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #ef4444;
}

/* 输入区域 - 优化底部固定 */
.input-container {
  height: 100%;
  width: 100%;
  // border-top: 1px solid var(--kimi-border);
  // background: var(--kimi-bg);
  padding: 20px;
  z-index: 10;
  // box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.recommended-questions {
  margin-bottom: 20px;
}

.recommended-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--kimi-text-primary);
}

.questions-scroll {
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 8px 30px;
}

.question-chip {
  padding: 10px 20px;
  border: 1px solid var(--kimi-border);
  background: white;
  border-radius: 24px;
  font-size: 14px;
  color: var(--kimi-text-primary);
  white-space: nowrap;
  transition: all 0.2s;
  font-weight: 500;
}

.question-chip:hover {
  border-color: var(--kimi-primary);
  color: var(--kimi-primary);
  background: var(--kimi-hover);
  transform: translateY(-1px);
}

.input-wrapper {
  width: 100%;
  max-width: 800px;
}

.input-box {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  border: 2px solid var(--kimi-border);
  border-radius: 16px;
  padding: 16px;
  background: white;
  transition: all 0.3s;
}

.input-box:focus-within {
  border-color: var(--kimi-primary);
  box-shadow: 0 0 0 4px rgba(16, 163, 127, 0.15);
  transform: translateY(-2px);
}

.message-input {
  flex: 1;
  resize: none;
  font-size: 15px;
  line-height: 1.6;
  height: 48px !important;
  max-height: 120px;
  color: var(--kimi-text-primary);
  border: none;
  outline: none;
  font-family: inherit;
}

.message-input::placeholder {
  color: var(--kimi-text-secondary);
}

.send-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--kimi-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}

.send-btn:hover:not(.disabled) {
  background: var(--kimi-primary-hover);
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 163, 127, 0.3);
}

.send-btn.disabled {
  background: var(--kimi-border);
  color: var(--kimi-text-secondary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.input-footer {
  margin-top: 12px;
  text-align: center;
}

.input-tips {
  font-size: 13px;
  color: var(--kimi-text-secondary);
}

/* 打字指示器 */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kimi-primary);
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .messages-container {
    min-height: calc(100vh - 140px);
  }
  
  .welcome-message {
    padding: 0 16px;
    min-height: 300px;
  }
  
  .welcome-content h2 {
    font-size: 24px;
  }
  
  .welcome-content p {
    font-size: 16px;
  }
  
  .message {
    margin-bottom: 24px;
    gap: 12px;
    padding: 0 16px;
  }
  
  .message-avatar {
    width: 32px;
    height: 32px;
  }
  
  .message-text {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .input-container {
    padding: 16px;
  }
  
  .input-box {
    padding: 12px;
  }
}
</style>